import React, { FC, useEffect } from "react";
import { Typography, Col, Row, Button, Form, Input, Checkbox, Space, message } from 'antd'
import styles from "./Register.module.scss";
import { Link, useNavigate } from "react-router-dom";
import { loginService } from '../services/user'
import { useRequest } from 'ahooks'
import { setToken } from '../utils/user-token'

const { Title } = Typography
type FieldType = {
    username?: string;
    password?: string;
    remember?: string
};
const USERNAME_KEY = 'USERNAME'
const PASSWORD_KEY = 'PASSWORD'
function rememberUser(username: string, password: string) {
    localStorage.setItem(USERNAME_KEY, username)
    localStorage.setItem(PASSWORD_KEY, password)
}

function deleteUserFromStorage() {
    localStorage.removeItem(USERNAME_KEY)
    localStorage.removeItem(PASSWORD_KEY)
}

function getUserInfoFromStorage() {
    return {
        username: localStorage.getItem(USERNAME_KEY),
        password: localStorage.getItem(PASSWORD_KEY),
    }
}
const Login: FC = () => {
    const [form] = Form.useForm() // 第三方 hook
    const nav = useNavigate()
    useEffect(() => {
        const { username, password } = getUserInfoFromStorage()
        form.setFieldsValue({ username, password })
    }, [])
    const { run } = useRequest(
        async (username: string, password: string) => {
            const data = await loginService(username, password)
            return data
        },
        {
            manual: true,
            onSuccess(result) {
                const { token = '' } = result
                setToken(token) // 存储 token

                message.success('登录成功')
                nav('/manage/list') // 导航到“我的问卷”
            },
        }
    )
    const onFinish = (values: any) => {
        const { username, password, remember } = values || {}

        run(username, password) // 执行 ajax

        if (remember) {
            rememberUser(username, password)
        } else {
            deleteUserFromStorage()
        }
    }
    return <div className={styles.container}>

        <Row align={'middle'} className={styles.conent}>
            <Col  className={styles.form} xs={{ span: 24, offset: 0 }} lg={{ span: 8, offset: 8 }} >
                <div >
                    <Title className={styles.title} level={2}>登录</Title>
                </div>
                <div>
                    <Form
                        name="basic"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item<FieldType>
                            label="用户名"
                            name="username"
                            rules={[
                                { required: true, message: '请输入用户名' },
                                { type: 'string', max: 11, min: 5, message: '请输入5到11位用户名' }
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item<FieldType>
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item<FieldType>
                            name="remember"
                            valuePropName="checked"
                            wrapperCol={{ offset: 6, span: 16 }}
                        >
                            <Space>                            
                                    <Checkbox>记住我</Checkbox>
                                    <Link className={styles.buttons} to={'/register'}>没有有账户,去注册</Link>
                            </Space>
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 10, span: 16 }} >
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Col>
        </Row>
    </div >
}

export default Login